<template>
    <div class="cantainer">
        <div class="title">
            <h2>患者信息</h2>
        </div>
        <div class="listipt">
            <div class="listipt-one">
                  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="10px" class="demo-ruleForm">
                    <el-form-item prop="name" style="width:18%" >
                      <span>患者姓名</span>
                      <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                     <el-form-item prop="card" style="width:18%" >
                      <span>患者卡号</span>
                      <el-input v-model="ruleForm.card"></el-input>
                    </el-form-item>
                     <el-form-item prop="age" style="width:18%" >
                      <span>患者年龄</span>
                      <el-input v-model="ruleForm.age"></el-input>
                    </el-form-item>
                     <el-form-item style="width:18%" >
                       <div class="block">
                            <span class="demonstration">出生日期</span>
                            <el-date-picker
                              v-model="value1"
                              type="datetime"
                              placeholder="选择出生时间">
                            </el-date-picker>
                      </div>
                    </el-form-item>
              </el-form>
            </div>
            <div class="listipt-one">
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="10px" class="demo-ruleForm">
                     <el-form-item prop="sex" style="width:18%" >
                      <span>性别</span>
                      <el-select v-model="ruleForm.sex" placeholder="请选择您的性别">
                        <el-option label="男" value="shanghai"></el-option>
                        <el-option label="女" value="beijing"></el-option>
                      </el-select>
                    </el-form-item>
                     <el-form-item prop="usename" style="width:17%" label-width="px" >
                      <span>手机号码</span>
                      <el-input v-model="ruleForm.usename"></el-input>
                    </el-form-item>
                     <el-form-item prop="cardnumber" style="width:18%" >
                      <span>证件号码</span>
                      <el-input v-model="ruleForm.cardnumber"></el-input>
                    </el-form-item>
                     <el-form-item prop="zdtype" style="width:18%" >
                      <span>诊断类型</span>
                      <el-input v-model="ruleForm.zdtype"></el-input>
                    </el-form-item>
              </el-form>
            </div>
            <div class="listipttwo">
                 <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="10px" class="demo-ruleForm">
                     <el-form-item prop="address" style="width:18%" >
                      <span>地址</span>
                      <el-cascader v-model="ruleForm.address" :options="options" ></el-cascader>
                    </el-form-item>
                     <el-form-item style="width:43%" class="formitem" label-width="48px" >
                      <br>
                      <el-input></el-input>
                    </el-form-item>
                  </el-form>
            </div>
          <div class="deep">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="10px" class="demo-ruleForm">
                 <el-form-item style="width:67%" >
                      <span>备注</span>
                      <el-input></el-input>
                    </el-form-item>
             </el-form>       
          </div>
        </div>
    </div>
</template>

<script>
import area from '../../../assets/area.json'
export default {
    data() {
      return {
        options:area,//级联框
        ruleForm: {
          sex: '',
          address: '',
          usename:'',
          cardnumber:'',
          zdtype:'',
        },
        rules: {
          sex: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
           
          ],
          address: [
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ],
        },
         pickerOptions: {
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        value1: '',
        value2: '',
        value3: ''
      
        
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

<style lang="less" scoped >
  .cantainer{
    width: 100%;
    height: 370px;
    .title{
      width: 100%;
      height: 30px;
      h2{
        color: rgb(102, 110, 232);
        margin-left: 40px;
        line-height: 30px;
      }
    }
    .listipt{
      width: 100%;
      height: 100%;
      .listipt-one{
        width: 100%;
        height: calc(100% / 4);
        
        .demo-ruleForm{
          display: flex;
          justify-content: space-around;
        }
      }
      .listipttwo{
         width: 100%;
        height: calc(100% / 4);
      .demo-ruleForm{
        display: flex;
        .el-form-item{
          margin-left: 45px;
        }
      }
      }
      .deep{
        width: 100%;
        height: 60px;
        .el-form-item{
          margin-left: 46px;
        }
      }
    }
  }
</style>